<template>
  <div id="home">
    <navBar class="home-nav"><template v-slot:center>蘑菇雞 </template></navBar>
    <HomeSwiper :banners="banners"> </HomeSwiper>
    <RecommendView :recommends="recommends"></RecommendView>
    <FeatureView></FeatureView>
    <TabControl
      :titles="['流行', '新品', '精选']"
      @tabclick="tabClick"
    ></TabControl>

    <GoodsList :goods="showGoods"></GoodsList>

    <ul>
      <li>1测试列表</li>
      <li>2测试列表</li>
      <li>3测试列表</li>
      <li>4测试列表</li>
      <li>5测试列表</li>
      <li>6测试列表</li>
      <li>7测试列表</li>
      <li>8测试列表</li>
      <li>9测试列表</li>
      <li>10测试列表</li>
      <li>11测试列表</li>
      <li>12测试列表</li>
      <li>13测试列表</li>
      <li>14测试列表</li>
      <li>15测试列表</li>
      <li>16测试列表</li>
      <li>17测试列表</li>
      <li>18测试列表</li>
      <li>19测试列表</li>
      <li>20测试列表</li>
      <li>21测试列表</li>
      <li>22测试列表</li>
      <li>23测试列表</li>
      <li>24测试列表</li>
      <li>25测试列表</li>
      <li>26测试列表</li>
      <li>27测试列表</li>
      <li>28测试列表</li>
      <li>29测试列表</li>
      <li>30测试列表</li>
      <li>31测试列表</li>
      <li>32测试列表</li>
      <li>33测试列表</li>
      <li>34测试列表</li>
      <li>35测试列表</li>
      <li>36测试列表</li>
      <li>37测试列表</li>
      <li>38测试列表</li>
      <li>39测试列表</li>
      <li>40测试列表</li>
      <li>41测试列表</li>
      <li>42测试列表</li>
      <li>43测试列表</li>
      <li>44测试列表</li>
      <li>45测试列表</li>
      <li>46测试列表</li>
      <li>47测试列表</li>
      <li>48测试列表</li>
      <li>49测试列表</li>
      <li>50测试列表</li>
      <li>51测试列表</li>
      <li>52测试列表</li>
      <li>53测试列表</li>
      <li>54测试列表</li>
      <li>55测试列表</li>
      <li>56测试列表</li>
      <li>57测试列表</li>
      <li>58测试列表</li>
      <li>59测试列表</li>
      <li>60测试列表</li>
      <li>61测试列表</li>
      <li>62测试列表</li>
      <li>63测试列表</li>
      <li>64测试列表</li>
      <li>65测试列表</li>
      <li>66测试列表</li>
      <li>67测试列表</li>
      <li>68测试列表</li>
      <li>69测试列表</li>
      <li>70测试列表</li>
      <li>71测试列表</li>
      <li>72测试列表</li>
      <li>73测试列表</li>
      <li>74测试列表</li>
      <li>75测试列表</li>
      <li>76测试列表</li>
      <li>77测试列表</li>
      <li>78测试列表</li>
      <li>79测试列表</li>
      <li>80测试列表</li>
      <li>81测试列表</li>
      <li>82测试列表</li>
      <li>83测试列表</li>
      <li>84测试列表</li>
      <li>85测试列表</li>
      <li>86测试列表</li>
      <li>87测试列表</li>
      <li>88测试列表</li>
      <li>89测试列表</li>
      <li>90测试列表</li>
      <li>91测试列表</li>
      <li>92测试列表</li>
      <li>93测试列表</li>
      <li>94测试列表</li>
      <li>95测试列表</li>
      <li>96测试列表</li>
      <li>97测试列表</li>
      <li>98测试列表</li>
      <li>99测试列表</li>
      <li>100测试列表</li>
    </ul>
  </div>
</template>

<script>
/*导入顶部导航栏*/
import navBar from "@/components/common/navBar/NavBar";
/*导入轮播图组件*/
import HomeSwiper from "../home/childComps/HomeSwiper";
/*导入热门推荐*/
import RecommendView from "./childComps/RecommendView";

import FeatureView from "./childComps/FeatureView";
/*导入切换选项卡*/
import TabControl from "@/components/content/tabControl/TabControl";
/*导入商品展示组件*/
import GoodsList from "@/components/content/goods/GoodsList";
/*导入网络请求*/
import { getHomeMultidata, getHomeGoods } from "@/network/home";

export default {
  name: "Home",
  components: {
    navBar,
    HomeSwiper,
    RecommendView,
    FeatureView,
    TabControl,
    GoodsList,
  },
  data() {
    return {
      banners: [],
      recommends: [],
      goods: {
        
        new: { page: 0, list: [] },
        pop: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
      currentType: "pop",
    };
  },
  computed: {
    showGoods() {
      return this.goods[this.currentType].list;
    },
  },
  created() {
    this.getHomeMultidata();

    this.getHomeGoods("pop");
    this.getHomeGoods("new");
    this.getHomeGoods("sell");
  },

  methods: {
    /*网络请求相关的方法*/
    getHomeMultidata() {
      getHomeMultidata()
        .then((result) => {
          this.banners = result.data.banner.list;
          this.recommends = result.data.recommend.list;
        })
        
    },
    getHomeGoods(type) {
      const page = this.goods[type].page + 1;
      getHomeGoods(type, page)
        .then((result) => {
          this.goods[type].list.push(...result.data.list);
          this.goods[type].page += 1;
        })
        
    },
    /*事件监听的方法*/
    tabClick(index) {
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
          break;
      }
    },
  },
};
</script>
<style scoped>
.home-nav {
  background-color: var(--color-tint);
  color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
}
.tab-control {
  position: sticky;
  top: 44px;
  z-index: 9;
}
</style>
